<template>
  <div class="dialog">
    <div class="leave" @click="dialogFormVisible = true" @mouseover="mouseover" @mouseout="mouseout">
        <img src="/home/static/imgs/icon-liuyan.png" alt="留言图片" v-show="imageshow">
        <span v-show="spanshow">留言</span>
    </div>
    <el-dialog title="联系我们" :visible.sync="dialogFormVisible">
      <el-form :model="forms" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="names">
          <el-input name="name" v-model="forms.names" auto-complete="on" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop="phone">
          <el-input name="phone" v-model="forms.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input name="email" v-model="forms.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="留言" :label-width="formLabelWidth" prop= "body">
          <el-input type="textarea" name="body" v-model="forms.body" auto-complete="off" placeholder="请留言"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Dialog',
  data() {
    return {
      dialogFormVisible: false,
      forms: {
        names: '',
        phone: '',
        email: '',
        body: ''
      },
      formLabelWidth: '120px',
      rules: {
        names: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        body: [
          {required: true, message: '请输入留言', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,message: '请输入正确手机号', trigger: 'blur'}
        ]  
    },
      imageshow: true,
      spanshow: false
  }
},
  methods:{
    formdata(){
      window.$.post(this.apiUrl + '/messages/store',{
        name:this.forms.names,
        phone: this.forms.phone,
        email: this.forms.email,
        body:this.forms.body
      }, function (res) {

      });

      setTimeout(() => {
        if(true){
        //   this.$message({
        //   message: '你好！你的信息已提交成功，我们会尽快与你联系。',
        //   type: 'success',
        //   center: true
        // });
          return this.forms.phone = "",this.forms.body = "", this.forms.email = "",this.forms.names = "";         
        }
      }, 2000)
      setTimeout(() => {
         this.$alert('你的信息已成功提交，我们会尽快与你联系。', '提交成功', {
          confirmButtonText: '确定',
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${ action }`
          //   });
          // }
        });
      }, 1000);
      return this.dialogFormVisible = false;
    },
    mouseover(){
      this.imageshow = false;
      this.spanshow = true;
    },
    mouseout(){
      this.spanshow = false;
      this.imageshow = true;
    }
  }
}
</script>
<style scoped>
.dialog .leave{
    width: 59px;
    height: 60px;
    background-color: #e5e5e5;
    margin-left: 122px;
    line-height: 60px;
    margin-top: 10px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    transition: background-color 1.5s;
    position: fixed;
    top: 520px;
    right: 0;
    z-index: 1000;
}
.dialog .leave:hover{
    background-color: #e71f19;
}
.dialog .leave img{
    vertical-align: middle;
}
.dialog .leave span{
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
</style>
